layui.define(['layer', 'laytpl'], function (exports) {
  var $ = layui.jquery;
  var layer = layui.layer;
  var laytpl = layui.laytpl;
  var _body = $('body');
  var Sidebar = function () {
    this.version = '1.0.0';
  };
  var tpl = [
    '<div class="kit-sidebar" style="right:-{{d.width}};width:{{d.width}};" kit-sidebar="{{d.id}}">',
    '<div class="kit-sidebar-body">',
    '  <div class="layui-card">',
    '    <div class="layui-card-header">',
    '      <span class="nowrap" title="{{d.title}}">{{d.title}}</span>',
//    '      <div class="kit-sidebar-reload" title="刷新">',
//    '        <i class="layui-icon">&#xe669;</i>',
//    '      </div>',
    '      <div class="kit-sidebar-close" title="关闭">',
    '        <i class="layui-icon">&#x1006;</i>',
    '      </div>',
    '    </div>',
    '    <div class="layui-card-body">',
    '      {{d.content}}',
    '    </div>',
    '  </div>',
    '</div>',
    '</div>'
  ].join('');
  var load_tpl = [
    '<div class="kit-sidebar-loading layui-anim layui-anim-fadein">',
    '    <div>',
    '        <i class="layui-icon layui-anim layui-anim-rotate layui-anim-loop">&#xe63e;</i>',
    '    </div>',
    '</div>',
  ].join('');
  Sidebar.prototype.defaults = {
    elem: undefined, // 触发按钮
    content: '', // 内容
    shade: false, //显示遮盖层
    shadeClose: true, // 点击遮盖层关闭
    title: '未命名', //标题
    width: '280px', //盒子的宽度
    done: undefined
  };
  Sidebar.prototype.render = function (options) {
    var that = this;
    var defaults = that.defaults;
    $.extend(true, defaults, options);
    var config = defaults;
    var data = {
      title: config.title,
      id: guid(),
      content: config.content,
      width: config.width
    };
    _private.renderHTML(config, data);
    return that;
  };
  var _private = {
    renderHTML: function (config, data) {
      var _elem = $(config.elem);
      if (_elem.attr('kit-sidebar-target') !== undefined) {
        return;
      }
      laytpl(tpl).render(data, function (html) {
        // 添加遮盖层
        if (config.shade) {
          html = html + '<div class="kit-shade" kit-shade="' + data.id + '"></div>';
        }
        _body.append(html);
        typeof config.done === 'function' && config.done();
        // 处理事件
        var _sidebar = $('div[kit-sidebar="' + data.id + '"]');
        var _shade = $('div[kit-shade="' + data.id + '"]');
        _elem.attr('data-toggle', 'off');
        _elem.attr('kit-sidebar-target', 'true');
        _elem.on('click', function () {
          var toggle = $(this).data('toggle');
          switch (toggle) {
            case 'on':
              _sidebar.animate({
                right : '-' + config.width
              }); 
              _shade.hide();
              $(this).data('toggle', 'off');
              break;
            case 'off':
              _sidebar.animate({
            	right : '0px'
              });
              _shade.show();
              $(this).data('toggle', 'on');
              break;
          }
        });
        // 如果是elem为object 则直接触发事件
        if (typeof config.elem === 'object') {
          _elem.click();
        }
        // 遮盖层点击关闭
        config.shadeClose && _shade.on('click', function () {
          _elem.click();
        });
        // 绑定关闭事件
        _sidebar.find('.kit-sidebar-close').on('click', function () {
          _elem.click();
        });
      });
    },
    // 显示加载层
    showLoading: function (_sidebar) { //fadein
      _sidebar.append(load_tpl.join(''));
    },
    // 移除加载层
    hideLoading: function (_sidebar) {
      setTimeout(function () {
        var _load = _sidebar.find('.kit-sidebar-loading');
        _load.addClass('layui-anim-fadeout');
        setTimeout(function () {
          _load.remove();
        }, 300);
      }, 500);
    }
  };
  var sidebar = new Sidebar();
  //输出sidebar接口
  exports('sidebar', sidebar);
});

function guid() {
    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
        var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
        return v.toString(16);
    });
}